<template>
	<quill-editor class="editor" :value="value" ref="myQuillEditor" :options="editorOption"
		@focus="onEditorFocus($event)" @blur="onEditorBlur($event)" @input="onEditorChange($event)"></quill-editor>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import {
	quillEditor
} from 'vue-quill-editor'
// 工具栏配置
const toolbarOptions = [
	["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
	[{
		list: "ordered"
	}, {
		list: "bullet"
	}], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
	[{
		script: "sub"
	}, {
		script: "super"
	}], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
	[{
		indent: "-1"
	}, {
		indent: "+1"
	}], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
	[{
		size: ["small", false, "large", "huge"]
	}], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
	[{
		header: [1, 2, 3, 4, 5, 6, false]
	}], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
	[{
		color: []
	}, {
		background: []
	}], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
	[{
		align: []
	}], // 对齐方式-----[{ align: [] }]
	["clean"], // 清除文本格式-----['clean']
	["image"], // 链接、图片、视频-----['link', 'image', 'video']
	// ["video"] // 链接、图片、视频-----['link', 'image', 'video']
];
export default {
	name: "Editor",
	components: {
		quillEditor,
	},
	props: {
		value: String
	},
	data() {
		return {
			editorOption: {
				theme: "snow",
				placeholder: "请输入正文",
				modules: {
					// imageDrop: true,
					// imageResize: {
					// 	displayStyles: {
					// 		backgroundColor: "black",
					// 		border: "none",
					// 		color: "white"
					// 	},
					// 	modules: ["Resize", "DisplaySize", "Toolbar"]
					// },
					//  富文本编辑器配置
					toolbar: {
						container: toolbarOptions
					}
				}
			}
		};
	},
	computed: {
		//当前富文本实例
		editor() {
			return this.$refs.myQuillEditor.quill;
		}
	},
	methods: {
		// 准备富文本编辑器
		onEditorReady() { },
		// 富文本编辑器 失去焦点事件
		onEditorBlur() { },
		// 富文本编辑器 获得焦点事件
		onEditorFocus() { },
		// 富文本编辑器 内容改变事件
		onEditorChange(value) {
			// 外面v-model  其实相当于 绑定一个变量 vlaue  并且 监听 input事件 更改value的值
			//<Editor :value="xxxxxx"  @input="xxxxxx = value">  这其实就是v-model的含义
			//等于你之前没有把编辑器里面的内容 返回给父级。。父级没法知道内容
			this.$emit("input", value)
		},
	},
	mounted() {

	}
}
</script>

<style lang='scss'>
.editor {
	line-height: normal !important;
	width: 100%;
	// height: 450px;
	text-align: left;

	.ql-container {
		min-height: 100%;
		// min-height: calc(100% - 40px);
		width: 100%;
		border: 1px solid #ccc;
	}

	.ql-editor.ql-blank {
		min-height: 450px;
	}

	.ql-editor.ql-blank:before {
		color: rgba(255, 255, 255, 0.3);
		font-style: normal;
	}

	.ql-snow .ql-tooltip[data-mode="link"]::before {
		content: "请输入链接地址:";
	}

	.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
		border-right: 0px;
		content: "保存";
		padding-right: 0px;
	}

	.ql-snow .ql-tooltip[data-mode="video"]::before {
		content: "请输入视频地址:";
	}

	.ql-snow .ql-picker.ql-size .ql-picker-label::before,
	.ql-snow .ql-picker.ql-size .ql-picker-item::before {
		content: "14px";
	}

	.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
	.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
		content: "10px";
	}

	.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
	.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
		content: "18px";
	}

	.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
	.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
		content: "32px";
	}

	.ql-snow .ql-picker.ql-header .ql-picker-label::before,
	.ql-snow .ql-picker.ql-header .ql-picker-item::before {
		content: "文本";
	}

	.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
	.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
		content: "标题1";
	}

	.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
	.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
		content: "标题2";
	}

	.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
	.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
		content: "标题3";
	}

	.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
	.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
		content: "标题4";
	}

	.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
	.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
		content: "标题5";
	}

	.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
	.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
		content: "标题6";
	}

	.ql-snow .ql-picker.ql-font .ql-picker-label::before,
	.ql-snow .ql-picker.ql-font .ql-picker-item::before {
		content: "标准字体";
	}

	.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
	.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
		content: "衬线字体";
	}

	.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
	.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
		content: "等宽字体";
	}
}
</style>
